<template>
  <div>
    <div class="filter-more">
      <div class="from_header">
        <el-form ref="form" label-width="120px" inline>
          <el-form-item label="消息名称：">
            <el-input
              v-model.trim="messageQuery.messageName"
              clearable
              @clear="selected"
              size="small"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="状态选择：">
            <el-select v-model="messageQuery.status" clearable placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

        </el-form>

        <div class="establish">
          <el-button type="primary" size="small" @click="selected"
          >查询
          </el-button
          >
        </div>
      </div>
    </div>

    <el-table
      :v-loading="messageTableLoading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      :data="messageList"
      border
      height="400"
      :header-row-style="{
        'background-color': '#E6E6E6',
        'font-weight': 'bold',
        color: '#333'
      }"
      align="center"
      style="width: 100%; margin-bottom: 20px"
    >
      <el-table-column
        show-overflow-tooltip
        align="center"
        prop="messageName"
        label="消息名称"
      />
      <el-table-column
        show-overflow-tooltip
        align="center"
        prop="templateBody"
        label="模板内容"
      />
      <el-table-column
        show-overflow-tooltip
        align="center"
        prop="type"
        label="消息类型"
      />
      <el-table-column
        show-overflow-tooltip
        align="center"
        prop="name"
        label="启用状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="switchChange($event, scope.row)"
            :active-value="0"
            :inactive-value="1">
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column fixed="right" align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="() => upload(scope.row)"
          >修改接收人
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :current-page="messageQuery.pageIndex"
      :total="total"
      :page-size="messageQuery.pageSize"
      style="padding: 30px 0; text-align: end"
      layout="total, prev, pager, next,jumper"
      @current-change="fetchData"
    />

    <el-dialog
      :visible.sync="dialogFormVisible"
      :title="dialogFormValue"
    >
      <el-tree
        :data="keyList"
        show-checkbox
        ref="tree"
        node-key="id"
        :default-checked-keys="selectedIdList"
        :props="defaultProps">
      </el-tree>
      <div slot="footer" class="dialog-footer" align="right">
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button @click="restData">取消</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import user from "@/api/acl/user.js";

export default {
  data() {
    return {
      messageTableLoading: false,
      keyList: [],
      selectedIdList: [],
      dialog: false,
      dataList: [],
      dialogFormVisible: false,
      dialogFormValue: "",
      messageList: [],
      messageQuery: {
        pageIndex: 1,
        pageSize: 10,
        status: null,
        type: null,
        messageName: null
      },
      roleIdUpdate: "",
      defaultProps: {
        children: 'children',
        label: 'userName'
      },
      message: {
        id: null,
        status: 1
      },
      total: 0,
      options: [
        {
          value: null,
          label: "全部"
        }, {
          value: 0,
          label: '启用'
        }, {
          value: 1,
          label: "禁用"
        }],
      configuration:{
        userIds:[],
        messageId:null
      }

    };
  },
  mounted() {
    this.getMessageData();
  },
  methods: {
    onSubmit(){
      let res = this.$refs.tree.getCheckedNodes()
      let arr = []
      res.forEach((item) => {
        if (item.id != null){
          arr.push(item.id)
        }
      })
      this.configuration.userIds = arr
      user.updateMessageConfiguration(this.configuration).then(response => {
        this.dialogFormVisible = false;
        this.$message.success("修改成功");
      })
    },
    restData() {
      this.dialogFormVisible = false;
      this.dialogFormValue = "";
    },
    selected() {
      this.getMessageData();
    },
    getMessageData() {
      this.messageTableLoading = true
      user.getMessageList(this.messageQuery).then(response => {
        this.messageList = response.list;
        this.total = response.total
        this.messageTableLoading = false
      })
        .catch(aa => {
          this.messageTableLoading = false
        });
    },
    getDepartmentData(val) {
      user.getDepartmentList(val).then(response => {
        this.keyList = response.root;
        this.selectedIdList = response.selectIdList;
      });
    },
    switchChange(e, data) {
      this.message.status = e
      this.message.id = data.id
      let statusMessage = e === 0 ? '启用' : '禁用';
      let afterMessage = e === 0 ? '启用后用户会再收到消息' : '禁用后用户不会收到该消息通知';
      let message = "确定要" + statusMessage + data.messageName + afterMessage
      this.$confirm(message, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          user.updateMessage(this.message).then(response => {
            this.$message.success("修改成功");
            this.getMessageData()
          });
        })
        .catch(action => {
          this.getMessageData()
        });
    },
    fetchData(val) {
      this.messageQuery.pageIndex = val;
      this.getMessageData();
    },
    upload(val) {
      this.dialogFormVisible = true;
      this.configuration.messageId = val.id
      this.dialogFormValue = "修改接收人";
      this.getDepartmentData(val.id)
    },
    clearData() {
      this.$confirm("是否清除全部数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          user.clearData().then(res => {
            if (res.rtn === 0) {
              this.$message({
                message: "删除成功",
                duration: 1000
              });
              this.roleListClick();
            } else {
              this.$message({
                message: res.message,
                duration: 1000
              });
            }
          })
        })
    }
  }
};
</script>
<style scoped>
.establish {
  padding-right: 20px;
  text-align: right;
}
</style>
